<template>
    <div
        class="DataBlock"
        :style="{
            top: item.y + 'px',
            left: item.x + 'px',
            zIndex: item.id == HoverId ? 100 : 1,
        }"
        @mouseenter="emit('SetHoverId', item.id)"
    >
        <div class="TitleBox">
            <span class="Title" @mousedown.stop="Move">DataBlock</span>

            <a-popconfirm title="是否删除？" @confirm="emit('DeleteItem')">
                <DeleteOutlined />
            </a-popconfirm>

            <a-cascader placeholder="选择类型" :options="options" @change="onChange">
                <span> : {{ Type == null ? "选择类型" : Type }} </span>
            </a-cascader>
            <ValueButton />
        </div>

        <DataModel v-model:value="DataBlockValue" :option="DataBlockOption" />
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { MoveStart } from "./MoveEvent";
import { DeleteOutlined } from "@ant-design/icons-vue";
import Meteorolog from "./Types/Meteorolog.json";
import DataModel from "./Types/index.vue";

import ValueButton from "./Types/ValueButton.vue";

// provide("MoveEvent", props.MoveEvent);

const Type = ref(null);
const props = defineProps(["scale", "item", "HoverId", "MoveEvent"]);
const emit = defineEmits(["SetHoverId", "DeleteItem"]);

const DataBlockValue = ref();
const DataBlockOption = ref({ type: "string" });

const schemas = ref({});

provide("schemas", schemas);

const MoveEnd = (x, y) => {
    props.item.x = x;
    props.item.y = y;
};

function Move(event) {
    MoveStart(event, props.item, props.scale, MoveEnd, MoveEnd);
}

const options = [
    {
        value: "Base",
        label: "基础类型",
        children: [
            { label: "字符串", Option: { type: "string" }, value: "string" },
            { label: "数字", Option: { type: "number" }, value: "number" },
            { label: "对象", Option: { type: "object" }, value: "object" },
            { label: "数组", Option: { type: "array" }, value: "array" },
        ],
    },
    { value: "Meteorolog", label: "Meteorolog", children: [] },
];

for (const key in Meteorolog.components.schemas) {
    var item = Meteorolog.components.schemas[key];
    options[1].children.push({
        label: item.description ? `${item.description}(${key})` : key,
        value: key,
        Option: item,
    });
}

const onChange = (_value, selectedOptions) => {
    Type.value = selectedOptions.map((o) => o.label).join(" => ");
    DataBlockOption.value = selectedOptions.map((o) => o.Option)[1];
    schemas.value = Meteorolog.components.schemas;
};
</script>
<style lang="less" scoped>
.DataBlock {
    padding: 8px;
    position: absolute;
    background-color: rgb(196, 224, 255);
    border-radius: 5px;
    // transform: translate(1200px, 700px);
    border: 1px solid rgba(1, 1, 1, 0.3);
    box-shadow: 3px 3px 5px rgba(1, 1, 1, 0.2);
    user-select: none;
    display: flex;
    flex-direction: column;
}
.Type {
    cursor: pointer;
    padding: 0 3px;
    border-radius: 3px;
    &:hover {
        background-color: rgba(1, 1, 1, 0.2);
    }
}
.Title {
    cursor: move;
    padding: 3px 8px 3px 3px;
    margin-right: 8px;
    border-radius: 3px;
    background-color: rgba(8, 84, 114, 0.623);
    color: #fff;
    &:hover {
        background-color: rgba(1, 1, 1, 0.2);
    }
}
</style>
